<template>
  <div class="page">
    <heads></heads>
    <div class="page-content" ref="mybox" style="width: 100%;padding-bottom:55px">
        
        <div class="type-ac">
           <span v-for="(item,key) in typeActive" v-bind:class="{everActive:key==guigeSpan}"  @click="tyActive(key,item.type)">{{item.text}}</span>
        </div>
        <div v-if="direct">
            <div class="select-note" v-if="myriabit.show">
                <div class="left-text" ref="mybox">
                    万位
                </div>
                <div class="right-num" >
                    <span v-for="(num, key) in myriabit.tenthousand" v-on:click="exchange($event,'wan',num)" >{{num}}</span>
                </div>
            </div>
            <div class="select-note" v-if="kilobit.show">
                <div class="left-text">
                    千位
                </div>
                <div class="right-num" >
                    <span v-for="(num, key) in kilobit.tenthousand" v-on:click="exchange($event,'qian',num)" >{{num}}</span>
                </div>
            </div>
            <div class="select-note" v-if="hundreds.show">
                <div class="left-text">
                    百位
                </div>
                <div class="right-num">
                    <span v-for="(num, key) in hundreds.tenthousand" v-on:click="exchange($event,'bai',num)" >{{num}}</span>
                </div>
            </div>
            <div class="select-note" v-if="decade.show">
                <div class="left-text">
                    十位
                </div>
                <div class="right-num">
                    <span v-for="(num, key) in decade.tenthousand" v-on:click="exchange($event,'shi',num)">{{num}}</span>
                </div>
            </div>
            <div class="select-note" v-if="theUnit.show">
                <div class="left-text">
                    个位
                </div>
                <div class="right-num">
                    <span v-for="(num, key) in theUnit.tenthousand"  v-on:click="exchange($event,'ge',num)" >{{num}}</span>
                </div>
            </div>
        </div>
        <div v-else-if="sizeType">
            <!-- 大小单双 -->
            <p class="text-sm">猜中十位，个位属性，奖励4元</p>
            <div class="select-note" v-if="decade.show">
                <div class="left-text">
                    十位
                </div>
                <div class="right-num">
                    <span v-for="(num, key) in decadeMax.tenthousand" v-bind:class="{active:key==host.shiSizeTs}"  @click="maxMin(key,num,'shi')">{{num}}</span>
                </div>
            </div>
            <div class="select-note" v-if="theUnit.show">
                <div class="left-text">
                    个位
                </div>
                <div class="right-num">
                    <span v-for="(num, key) in theUnitMax.tenthousand" v-bind:class="{active:key==host.geSizeTs}"  @click="maxMin(key,num,'ge')">{{num}}</span>
                </div>
            </div>
        </div>
    </div>

    <div class="every-footer">
        <div class="ef-content">
            <div class="lf-txt" v-on:click="removeNote()">
                清空
            </div> 
            <div class="conter-txt">
                <p>{{noteNum}}注<span>{{noteMoney}}元</span></p>
                <i>奖金0</i>
            </div>
            <div class="rt-txt">
                选好了
            </div>   
        </div>
    </div>
  </div>
</template>
<script>
  import heads from '../components/header'
  import { Loadmore,Toast ,MessageBox } from 'mint-ui';
  import api from '../axios/api'
  import MtButton from "../../node_modules/mint-ui/packages/button/src/button";
  export default {
    data() {
      return {
        
        typeActive:[{
            type:1,
            text:"大小单双",
        },{
            type:2,
            text:"一星直选",
        },{
            type:3,
            text:"二星直选",
        },{
            type:4,
            text:"三星直选",
        },{
            type:5,
            text:"五星直选",
        },{
            type:6,
            text:"五星通选",
        },{
            type:7,
            text:"二星组选",
        },{
            type:8,
            text:"三星组三",
        },{
            type:9,
            text:"三星通六",
        }],

        /*直选 */
        myriabit:{
            show:true,
            tenthousand:[0,1,2,3,4,5,6,7,8,9],
        },
        kilobit:{
            show:true,
            tenthousand:[0,1,2,3,4,5,6,7,8,9],
        },
        hundreds:{
            show:true,
            tenthousand:[0,1,2,3,4,5,6,7,8,9],
        },
        decade:{
            show:true,
            tenthousand:[0,1,2,3,4,5,6,7,8,9],
        },
        theUnit:{
            show:true,
            tenthousand:[0,1,2,3,4,5,6,7,8,9],
        },

        decadeMax:{
            show:true,
            tenthousand:['大','小','单','双'],
        },
        theUnitMax:{
            show:true,
            tenthousand:['大','小','单','双'],
        },


        acWan:[],
        acQian:[],
        acBai:[],
        acShi:[],
        acGe:[],

        /**end* */

        direct:false,//直选



        sizeType:true,//大小单双类型
        host:{
            shiSizeTs:null,//十位选择样式
            shiType:[],//十位参数

            geSizeTs:null,//个位选择样式
            geType:[],
        },
       

        guigeSpan:"4",//默认模式中




        noteNum:0,//注数
        noteMoney:0,//注数金额,

        type:4,//投注类型
      }

    },
    components: {
      MtButton,
      'v-loadmore': Loadmore  
    
    },
    mounted() {

      
    },
    methods: {
        maxMin:function(i,c,d){
            if(d=='shi'){
                this.host.shiSizeTs = i;
                this.host.shiType=c;
            }else if(d=='ge'){
                this.host.geSizeTs= i;
                this.host.geType=c;
            }
            this.noteNum=this.host.shiType.length*this.host.geType.length;
            this.noteMoney= this.noteNum*2;
        },
        tyActive:function (i,c) {
            this.guigeSpan = i;
            this.type=c;
            // console.log(this.type)
        },

         exchange:function(event,type,num){  
            //获取被点击的元素对象  
            var a = event.target;  
            const _this=this;
            //获取被点击元素中的子元素<img>  
            if(a.className == "active") {  
                a.className = "no-active";  
                _this.removeArray(type,num)
            } else{  
                a.className = "active"; 
                 _this.addArray(type,num) 
            };
            _this.noteNum=_this.acWan.length*_this.acQian.length*_this.acBai.length*_this.acShi.length*_this.acGe.length;
            _this.noteMoney= _this.noteNum*2;
        },
        addArray:function(type,num){
            const _this=this;
            if(type=='wan'){
                _this.acWan.push(num)
                console.log(_this.acWan)
            }else if(type=='qian'){
                _this.acQian.push(num)
                console.log(_this.acQian)
            }else if(type=='bai'){
                _this.acBai.push(num)
                console.log(_this.acBai)
            }else if(type=='shi'){
                _this.acShi.push(num)
                console.log(_this.acShi)
            }else if(type=='ge'){
                _this.acGe.push(num)
                console.log(_this.acGe)
            }

        },
        removeArray:function(type,num){
            const _this=this;
            if(type=='wan'){
                let index =_this.acWan.indexOf(num);
                if (index > -1) {
                    _this.acWan.splice(index, 1);
                    console.log( _this.acWan)
                }
            }else if(type=='qian'){
                let index =_this.acQian.indexOf(num);
                if (index > -1) {
                    _this.acQian.splice(index, 1);
                    console.log( _this.acQian)
                }
            }else if(type=='bai'){
                let index =_this.acBai.indexOf(num);
                if (index > -1) {
                    _this.acBai.splice(index, 1);
                    console.log( _this.acBai)
                }
            }else if(type=='shi'){
                 let index =_this.acShi.indexOf(num);
                if (index > -1) {
                    _this.acShi.splice(index, 1);
                    console.log( _this.acShi)
                }
            }else if(type=='ge'){
                let index =_this.acGe.indexOf(num);
                if (index > -1) {
                    _this.acGe.splice(index, 1);
                    console.log( _this.acGe)
                }
            }
        },
        removeNote:function(){
            const _this=this;
            this.acWan=[];
            this.acQian=[];
            this.acBai=[];
            this.acShi=[];
            this.acGe=[];
            this.noteNum=0;
            this.noteMoney=0;
            let foodList = document.getElementsByClassName('active');
            let legnth=foodList.length;
            //  console.log(foodList.length)
               for(var i=0;i<legnth;i++){
                    foodList[0].className = "no-active";
               }
           
             
        }
    },
    components: {
      heads
    },
    computed:{
     
    }

  }
</script>
<style>
  @import '../sass/pageScss/every_color.scss';
</style>

